<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css特性</title>
    <style>
      /* 层叠性
        样式累加在元素上,相同属性以优先级高者显示,优先级相同,则后来者显示 
        特殊情况,当样式属性被!important修饰时,以这个属性最大优先级来看待

        注意: !important尽量少用,因为它的权重趋近于正无穷,所以一旦使用,几乎等于固定写死,后面要通过js修改样式的话就不太容易操作!!!
      */
      #mp {
        color: red;
        font-size: 25px;
      }

      p {
        font-weight: bolder;
        /* !important的作用可以提升指定样式属性优先级为正无穷 */
        color: blue !important;
      }

      /* 
        子元素可以直接继承父元素的某些样式(不是全部),这种特性的优点在于样式可以直接写一份给父元素,则子元素就可以直接复用共享

        注意: 继承的样式,无论它的选择器是什么,它的优先级都是0(最低)!

        哪些属性可以继承?
          1、字体系列属性
      　　font-family：字体系列
      　　font-weight：字体的粗细
      　　font-size：字体的大小
      　　font-style：字体的风格

      　　2、文本系列属性
      　　text-indent：文本缩进
      　　text-align：文本水平对齐
      　　line-height：行高
      　　word-spacing：单词之间的间距
      　　letter-spacing：中文或者字母之间的间距
      　　text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
      　　color：文本颜色

      　　3、元素可见性：
      　　visibility：控制元素显示隐藏

      　　4、列表布局属性：
      　　list-style：列表风格，包括list-style-type、list-style-image等

      　　5、光标属性：
      　　cursor：光标显示为何种形态
      */
      #mydiv {
        color: pink;
        font-size: 25px;
        font-weight: bolder;
        font-style: italic;
        width: 200px;
        height: 200px;
        background-color: bisque;
      }

      span {
        color: purple;
      }
    </style>
  </head>
  <body>
    <p id="mp" style="color: yellow">这是一段文字</p>

    <hr />

    <div id="mydiv">
      <span>span</span>
    </div>
  </body>
</html>
